<template>
  <div>
    <FormRender :schema="schema" @submit="handleSubmit" @validate="handleValidate" />
  </div>
</template>
<script lang="ts" setup>
import FormRender from '@/form-render/index.vue'
const schema = {
  type: 'object',
  column: 3,
  gutter: [16, 16],
  labelWidth: 100,
  size: 'medium', // 'small' | 'medium' | 'large'
  layout: 'vertical', // horizontal | vertical | inline
  properties: {
    name: {
      type: 'string',
      title: '姓名',
      widget: 'Input',
      rules: [
        {
          required: true,
          message: '请输入姓名',
        },
      ],
      props: {},
    },
    age: {
      type: 'number',
      title: '年龄',
      widget: 'InputNumber',
      rules: [
        {
          required: true,
          message: '请输入年龄',
        },
      ],
    },
    gender: {
      type: 'string',
      title: '性别',
      widget: 'Select',
      props: {
        options: [
          { label: '男', value: '男' },
          { label: '女', value: '女' },
        ],
      },
      rules: [
        {
          required: true,
          message: '请选择年纪',
        },
      ],
    },
  },
}

const handleSubmit = (data: any) => {
  console.log(data)
}

const handleValidate = (valid: boolean) => {
  console.log(valid)
}
</script>
<style lang="scss" scoped></style>
